<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>computed 计算属性</title>
	</head>

	<body>
		<div id="app">
			<h2>computed 计算属性</h2>
			<hr />
			<h3>基本的价格元素添加：{{newPrice}}</h3>
			<p>倒序排列（反转）</p>
			<ul>
				<li v-for="item in newList">{{item.title}}------{{item.data}}</li>
			</ul>
		</div>
		<script src="../assets/js/vue.min.js"></script>
		<script type="text/javascript">
			var list = [{
				title: '绝不坑队友!警察检查网吧 小学生:不慌 在团战',
				data: '2018/2/13'
			},
			{
				title: '女子“桃花癫”发作痴迷男星不上班 医生:3-5月高发',
				data: '2018/2/14'
			},
			{
				title: '郑州“大数据”来了！总人口 988万 人均年收入30556元',
				data: '2018/2/15'
			},
			{
				title: '大学生陷网贷刷单骗局 为百元佣金被骗11000元',
				data: '2018/2/23'
			}]
			var vm = new Vue({
				el: '#app',
				data: {
					price: '199',
					list: list
				},
				computed: {
					newPrice: function() {
						return '￥' + this.price + '元'
					},
					newList: function(){
						return this.list.reverse();
					}
				}
			})
		</script>
	</body>

</html>